<template>
	<view class="privacy-popup-packbox">
		<view v-show="officialShowPrivacyUsers"></view>
		
		<comMask v-model="officialShowPrivacyUsers">

		</comMask>
		<view
			:class="['popup-box', 'fixed', 'flex-direction-column', officialShowPrivacyUsers ? 'show' : '']"
			:style="{
				height: popupOfHeight,
				'max-height': popupOfMaxHeight
			}"
		>
			<view class="popup-header">
				<slot name="header"></slot>
			</view>
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-bg.png`" style="border-radius: 25rpx 25rpx 0 0" class="bg" mode=""></image>
			
			<view :class="['title', title ? 'relative' : 'absolute']">
				<image class="absolute close-txt-btn" 
				v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-close.png`"
				mode="" @click="handleDisagreePrivacyAuthorization"></image>
				<view class="flex relative flex-all-center font-hanserif-bold" style="height: 72rpx" v-if="title">
					{{ title }}
				</view>
				<view v-else style="height: 28rpx;"></view>
			</view>
			
			<view class="flex-full content flex-full relative">
				<slot></slot>
			</view>
			
			<view class="popup-footer relative">
				<view class="relative">
					<view @click="openPrivacyContract" style="font-size: 24rpx;color: #111111;margin-bottom: 28rpx;">
					  感谢您使用本小程序，在使用前您应当阅读井同意<text style="color: #2f80ed;">{{ privacyContractName }}</text>。
					</view> 
					
					<view style="font-size: 24rpx;color: #111111;margin-bottom: 28rpx;">
					  当您点击同意并开始使用该产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
					</view>
					
					<view class="flex flex-justify-content-between" style="padding: 28rpx 0 22rpx;">
						<view class=""></view>
							
						<view class="flex flex-end">
							<!-- 拒绝 -->
							<comBgView 
							v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-no.png`"
							@click="handleDisagreePrivacyAuthorization">
								<view class="btn-box font-hanserif-bold">拒绝</view>
							</comBgView>
							
							<view class="" style="width: 38rpx;"></view>
							
							<button id="agree-btn" class="trans-button" open-type="agreePrivacyAuthorization" @click="handleAgreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">
								<!-- 允许 -->
								<comBgView
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/popup/popup-btn-ok.png`"
								style="width: 170rpx;height: 56rpx;">
									<view class="btn-box font-hanserif-bold">允许</view>
								</comBgView>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		name: 'comPrivacyPopup',
		props: {
			value: {
				type: Boolean,
				default: () => true
			},
			popupOfHeight: {
				type: String,
				default: () => 'auto'
			},
			popupOfMaxHeight: {
				type: String,
				default: () => '1132rpx'
			},
			title: {
				type: String,
				default: () => ''
			},
			backgroundSize: {
				type: String,
				default: () => 'cover'
			},
		},
		data() {
			return {
				resolvePrivacyAuthorization: null,
			}
		},
		created() {
			// #ifdef MP-WEIXIN
			// 兼容低版本和PC端处理
			if (uni.onNeedPrivacyAuthorization) {
				// 需要用户同意隐私授权时
				uni.onNeedPrivacyAuthorization((resolve, eventInfo) => {
					this.resolvePrivacyAuthorization = resolve;
					this.$store.dispatch('SHOW_OFFICE_PRIVACY_GET_FUN');
				})
			}else {
				// 兼容pc端
				this.$store.commit('PRIVACY_HIDE_SET_FUN',true)
			}
			// #endif
		},
		
		computed: {
			officialShowPrivacyUsers: {
				get() {
					return this.$store.getters.officialShowPrivacyUsers;
				},
				set(v) {
					this.$emit('input', v)
				},
			},
			
			privacyContractName() {
				return this.$store.getters.privacyContractName;
			},
			
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		methods: {
			openPrivacyContract() {
				uni.openPrivacyContract({  
				  success: (res) => {  
				  }  
				});  
			},
			
			async handleAgreePrivacyAuthorization() {
				if(this.resolvePrivacyAuthorization) {
					// 告知平台用户已经同意，参数传同意按钮的id
					await this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
				}
				await this.$store.dispatch('SHOW_OFFICE_PRIVACY_GET_FUN', {
					isClickSure: true, // 是否手动确定
					isShowPrivas: false,  // 是否关闭弹框
				});
			},  
			
			async handleDisagreePrivacyAuthorization() {
				if(this.resolvePrivacyAuthorization) {
					// 告知平台用户已拒绝
					await this.resolvePrivacyAuthorization({ event: 'disagree' })
				};
				await this.$store.dispatch('SHOW_OFFICE_PRIVACY_GET_FUN', {
					isClickSure: true, // 是否手动确定
					isShowPrivas: false,  // 是否关闭弹框
				});
			},
		},
		options: {
			virtualHost: false,
		},
	}
</script>

<style lang="scss" scoped>
	.popup-box {
		background-color: #000000;
		bottom: 0;
		left: 0;
		z-index: 10000;
		transition: 0.3s all;
		transform: translateY(calc(100% + 98rpx));
		width: 100vw;
		
		&.show {
			transform: translateY(0%);
		}
		.title {
			width: 100%;
			font-size: 38rpx;
			font-weight: 800;
			color: #184971;
			height: 70rpx;
			font-style: italic;
		}
		.close-txt-btn {
			width: 70rpx;
			height: 70rpx;
			top: -34rpx;
			right: 10rpx;
			z-index: 100;
		}
		.content {
			overflow: auto;
			margin-top: 24rpx;
		}
		.popup-footer {
			bottom: 0;
			padding: 30rpx;
		}
		.btn-box{
			width: 170rpx; 
			height: 56rpx; 
			padding-bottom: 10rpx; 
			padding-right: 10rpx; 
			line-height: 56rpx;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
</style>
